<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brainfuck</title>
    <link rel="stylesheet" href="./css/style.css">
    <script type="text/javascript" src="js/lib/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/lib/underscore-min.js"></script>
    <script type="text/javascript" src="js/lib/backbone-min.js"></script>
    <script type="text/javascript" src="js/interpreter.js"></script>
    <script type="text/javascript" src="js/views.js"></script>
    <script type="text/javascript" src="js/models.js"></script>
</head>


<body>
    
    <div class="rightPage">
        <div id="interpreter">
            <section class="machine">
                <ul class="tape">
                </ul>
                <div class="pointer"><em></em></div>
            </section>
            <section class="editor">
                <div class="actions">
                    <a class="button" href="#" id="run">Run</a>
                    <a class="button" href="#" id="first-step">Step</a>
                    <a class="button hidden" href="#" id="stop">Stop</a>
                    <a class="button hidden" href="#" id="step">Step</a>
                    <a class="button hidden" href="#" id="pause">Pause</a>
                    <a class="button hidden" href="#" id="continue">Continue</a>
                    
                 
                    <div id="input-box">
                        <label>Waiting for input</label>
                        <input type="text" id="input" maxlength="1"/>
                    </div>
                </div>
                <div id="preview"></div>
                
                <textarea id="source">+++++ +++++             initialize counter (cell #0) to 10
    [                       use loop to set 70/100/30/10
        > +++++ ++              add  7 to cell #1
        > +++++ +++++           add 10 to cell #2
        > +++                   add  3 to cell #3
        > +                     add  1 to cell #4
    <<<< -                  decrement counter (cell #0)
    ]
    > ++ .                  print 'H'
    > + .                   print 'e'
    +++++ ++ .              print 'l'
    .                       print 'l'
    +++ .                   print 'o'
    > ++ .                  print ' '
    << +++++ +++++ +++++ .  print 'W'
    > .                     print 'o'
    +++ .                   print 'r'
    ----- - .               print 'l'
    ----- --- .             print 'd'
    > + .                   print '!'
    > .                     print '\n'</textarea>
            <h3>Output</h3>
            <pre id="output"></pre>
            </section>
        </div>
    </div>

</body>

<script type="text/javascript">
    $(function () {
        var cells = _(27).times($.noop);
        var tape = new Tape(cells);
        var pointer = new Pointer();
        new InterpreterView({
            editor: $("#source"),
            tape: tape,
            pointer: pointer
        }).render();
    });
</script>

</html>